<template>
	<view>
		<u-line color="#ddd" />
		<view class="groupContent">
			<view class="groupItem" v-for="(item,index) in groupList" :key="index" @click="goDetails(item.groupbuy_id)">
				<view class="itemImg">
					<image :src="item.groupbuy_image" mode=""></image>
				</view>
				<view class="itemInfo">
					<view class="title u-line-2">{{item.goods_name}}</view>
					<view class="condition">{{ item.buy_min_number + '人成团'}}</view>
					<view class="price">
						<view class="groupPrice">拼团价 ￥ <text class="nowPrice">{{item.groupbuy_price}}</text></view>
						<view class="personPrice">{{ '单人买 ¥' + item.goods_price}}</view>
						<view class="btn">立即拼团</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getGroupbuylist } from '../../api/product.js'
	export default {
		data() {
			return {
				groupList:[],
				page:1
			};
		},
		mounted() {
			this.getGroupbuylists()
		},
		methods:{
			getGroupbuylists(){
				let that= this;
				getGroupbuylist().then(res=>{
					let arr = res.list;
					arr.map(item=>{
						item.groupbuy_image = item.groupbuy_image[0]
					})
					that.groupList = arr;
				})
			},
			goDetails(id){
				uni.navigateTo({
					url:'/page/group-dateails/group-dateails?goodsId=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.groupContent{
	padding: 0 25upx;
	.groupItem{
		display: flex;
		padding: 25upx 0;
		border-bottom: 1upx solid #e8e8e8;
	}
	.itemImg{
		width: 220upx;
		height: 220upx;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.itemInfo{
		flex: 1;
		margin-left: 15upx;
		position: relative;
	}
	.condition{
		font-size: 26upx;
		margin-top: 10upx;
	}
	.price{
		width: 100%;
		position: absolute;
		bottom: 0;
	}
	.groupPrice{
		color: #fe3333;
		font-size: 22upx;
	}
	.personPrice{
		color: #999999;
		font-size: 22upx;
	}
	.nowPrice{
		font-size: 32rpx;
	}
	.btn{
		background-color: #fe512a;
		color: #fff;
		font-size: 26upx;
		padding: 5upx 20upx;
		border-radius: 25upx;
		position: absolute;
		right: 0;
		bottom: 14upx;
	}
}
</style>
